<script setup lang="ts">
import GlobalHeader from '@/components/GlobalHeader.vue';
</script>

<template>
    <div id="basic-layout">
        <a-layout style="height: 100vh;">
            <a-layout-header class="header">
               <GlobalHeader/>
            </a-layout-header>
            <a-layout-content class="content">
                <!-- 内容是可替换的 -->
                <router-view />
            </a-layout-content>
            <a-layout-footer class="footer">
                <a href="https://www.code-nav.cn" target="_blank">程序员 lzy</a>
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<style scoped>
#basic-layout {}
.header{
    margin-bottom: 16px;
    box-shadow: #eee 1px 1px 5px;
}
.content {
    background: linear-gradient(to right, #fefefe, #fff);
    margin-bottom: 28px;
    padding: 20px
}

.footer {
    background: #efefef;
    padding: 16px;
    border: 1px solid #dcdcdc;
    text-align: center
}
</style>